<template>
    <div>
        <el-menu
                :default-active="defaultActive"
                class="el-menu-vertical-demo"
                background-color="#204051"
                text-color="#fff"
                active-text-color="#ffd04b"
                router
        >
            <el-menu-item index="/front/tableNav">
                <i class="el-icon-s-home"></i>
                <span slot="title">餐桌管理</span>
            </el-menu-item>
            <el-menu-item index="/front/orderNav">
                <i class="el-icon-s-goods"></i>
                <span slot="title">点餐管理</span>
            </el-menu-item>
            <el-menu-item index="/front/membersNav">
                <i class="el-icon-user-solid"></i>
                <span slot="title">会员管理</span>
            </el-menu-item>
            <el-menu-item index="/front/indentNav">
                <i class="el-icon-s-order"></i>
                <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="/front/invoicingNav">
                <i class="el-icon-star-on"></i>
                <span slot="title">结账管理</span>
            </el-menu-item>
            <el-menu-item index="/front/workNav">
                <i class="el-icon-message-solid"></i>
                <span slot="title">工作管理</span>
            </el-menu-item>

        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "adminNav",
        computed: {
            defaultActive: {
                get: function () {
                    let arr = this.$route.path.split('/');
                    switch (arr[2]) {
                        case 'tableState':
                            return '/front/tableNav'
                        case 'tableOrder':
                            return '/front/orderNav'
                        case 'addMembers':
                            return '/front/membersNav'
                        case 'selectMembers':
                            return '/front/membersNav'
                        case 'selectOrder':
                            return '/front/indentNav'
                        case 'invoicing':
                            return '/front/invoicingNav'
                        case 'staffWork':
                            return '/front/workNav'

                    }


                }
            },

            set: function () {
            }

        },
        methods: {}
    };
</script>

<style scoped lang="less">

</style>